<template>
	<BaseContainer>
		<aplid-base-crud ref="crud" class="w-100" v-bind="baseConfig" :api="api||baseConfig.api"  :auth="auth||baseConfig.auth" :operateFormate="onOperateFormate" :beforeOnLoadFormate="beforeOnLoadFormate">
			<template v-slot:approvalTimes="{ row }">
				{{ row.approvalTimes || row.approvalTime }}
			</template>
			<template v-slot:menuColumn="{ row }">
				<el-button
					text
					type="primary"
					v-auth="'view_workflowApprovalLogic_approval'"
					v-if="row.approvalStatus.includes('2')"
					@click="handleOperate(row)"
					>审批</el-button
				>
			</template>
		</aplid-base-crud>

		<AplidDialog v-model="visible" width="85%" :rowData="rowData" @close="handleRefresh">
      <div class="padding">
        <AuditForm v-if="visible && operateType == 'approval'" :nowRowData="rowData" @refresh="handleRefresh"></AuditForm>
			  <AuditDetail v-if="visible && operateType == 'detail'" :nowRowData="rowData" @refresh="handleRefresh"></AuditDetail>
      </div>
		</AplidDialog>
	</BaseContainer>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import AplidDialog from '@/views/instOperate/components/AplidDialog/index.vue'
import { baseConfig } from './config'
import AuditForm from '../AuditForm/index.vue'
import AuditDetail from '../AuditDetail/index.vue'
import { getAreaObj } from '@/utils/util'

const props = withDefaults(
	defineProps<{
		subsidyType?: string
		api?: any
		auth?: any
	}>(),
	{
		subsidyType: '2',
	}
)

const crud = ref()
const rowData = ref({})
const visible = ref(false)
const operateType = ref('')
//  处理刷新
const handleRefresh = (query) => {
	visible.value = false
	nextTick(() => {
		crud.value.refreshChange(query)
	})
}

const handleOperate = (row) => {
	visible.value = false
	nextTick(() => {
		crud.value.handleOperate('approval', row, '审批')
	})
}
const onOperateFormate = (data, type) => {
	return new Promise((resolve, reject) => {
		if (type == 'approval' || type == 'detail') {
			visible.value = true
			rowData.value = data || {}
			operateType.value = type
		} else {
			resolve(data)
		}
	})
}

const beforeOnLoadFormate = (query?: any) => {
	return new Promise((resolve, reject) => {
		const crAreasObj: any = getAreaObj(query.authAreas, '')
		resolve({
			...query,
			...crAreasObj,
			authAreas: undefined,
			subsidyType: props.subsidyType,
		})
	})
}
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
	--el-dialog-border-radius: 10px;
}
:deep(.el-dialog__header) {
	padding: 0;
	margin: 0;
}
</style>
